<!--
 * @Author: wgl
 * @Date: 2025-03-02 14:52:36
 * @Description: 
 * 
-->
<template>
  <view class="container">
    <page-header title="办事指南" subtitle="为您提供清晰的业务办理指引" start-color="#39c5bb" end-color="#398dee" height="50rpx" />

    <!-- 地区选择栏 -->
    <view class="area-section">
      <view class="area-header">
        <text class="area-title">选择地区</text>
        <view class="area-toggle" @click="toggleAreaExpand">
          <text class="area-icon">{{ areaExpanded ? '▲' : '▼' }}</text>
        </view>
      </view>
      <view class="area-content" :class="{ 'area-expanded': areaExpanded }">
        <!-- 全部地区按钮单独一行 -->
<!--        <view class="area-row" style="max-height: 40rpx;padding: 10rpx;">
          <view class="area-item all-area" :class="{ 'area-active': selectedAreaId === null }" @click="selectArea(null)" style="margin:0;padding-top:6rpx;">全部地区</view>
        </view> -->
		
		<view class="area-right">
			<!-- 按父子关系分组显示地区，每组一行 -->
			<view v-for="(areaGroup, groupIndex) in areaList" :key="groupIndex" class="area-row">
			  <!-- 父地区 -->
			  <view
			    class="area-item parent-area"
			    :class="{ 'area-active': selectedAreaId === areaGroup.parent.areaId }"
			    @click="selectArea(areaGroup.parent.areaId)"
			  >
			    {{ areaGroup.parent.areaName }}
			  </view>
			    
			  <!-- 子地区 -->
			  <view class="child-areas">
			    <view
			      v-for="(childArea, childIndex) in areaGroup.children"
			      :key="childIndex"
			      class="area-item child-area"
			      :class="{ 'area-active': selectedAreaId === childArea.areaId }"
			      @click="selectArea(childArea.areaId)"
			    >
			      {{ childArea.areaName }}
			    </view>
			  </view>
			</view>
		</view>
		
      </view>
    </view>

    <view class="card-section mt-10" v-if="guideList.length > 0">
      <uni-list>
        <uni-list-item
          v-for="(item, index) in guideList"
          :key="index"
          clickable
          @click="navigateToDetail(item.id)"
          :title="item.title"
          :note="item.date"
          ellipsis="1"
          showArrow
        />
      </uni-list>
    </view>
    <uni-load-more :status="loadMoreStatus" :contentText="loadMoreText" />
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import PageHeader from '@/components/page-header/page-header.vue'
import { getGuideList } from '@/api/guide'
import { getAreaList } from '@/api/area'
import { navigateToDetail } from '@/hooks'

// 指南列表数据
const guideList = ref([])
const pageNum = ref(1)
const pageSize = ref(10)
const total = ref(0)
const loadMoreStatus = ref('more')
const loadMoreText = {
  contentdown: '上拉显示更多',
  contentrefresh: '正在加载...',
  contentnomore: '没有更多数据了'
}

// 地区相关数据
const areaList = ref([])
const selectedAreaId = ref(null)
const areaExpanded = ref(false)

// 切换地区展开/收起状态
const toggleAreaExpand = () => {
  areaExpanded.value = !areaExpanded.value
}

// 选择地区
const selectArea = (areaId) => {
  selectedAreaId.value = areaId
  loadMoreStatus.value = 'more' // 重置加载状态，确保切换地区后可以重新加载数据
  fetchGuideList(true) // 重新加载数据
}

// 获取地区列表
const fetchAreaList = async () => {
  try {
    const res = await getAreaList()
    if (res.code === 200 && res.data) {
      // 获取所有地区数据
      const allAreas = res.data

      // 获取顶级地区
      const topLevelAreas = allAreas.filter((area) => !area.parentId || area.parentId === 0)

      // 按照父地区分组整理数据
      const areasByParent = []

      // 处理每个顶级地区及其子地区
      topLevelAreas.forEach((parent) => {
        // 找出该父地区下的所有子地区
        const children = allAreas.filter((area) => area.parentId === parent.areaId)

        // 将父地区和子地区组合在一起
        areasByParent.push({
          parent,
          children
        })
      })

      // 将处理后的数据保存到响应式变量中
      areaList.value = areasByParent
    }
  } catch (error) {
    console.error('获取地区列表失败', error)
  }
}

// 获取办事指南列表
const fetchGuideList = async (reset = false) => {
  if (reset) {
    pageNum.value = 1
    guideList.value = []
  }
  
  if (loadMoreStatus.value === 'noMore') return

  loadMoreStatus.value = 'loading'
  try {
    const params = {
      pageNum: pageNum.value,
      pageSize: pageSize.value
    }
    // 如果选择了地区，添加地区ID参数
    if (selectedAreaId.value) {
      params.areaId = selectedAreaId.value
    }
	console.log(params)
    const res = await getGuideList(params)
    if (res.code === 200 && res.rows.length > 0) {
      const { rows, total: totalCount } = res
      const newList = rows.map((item) => ({
        id: item.guideId,
        title: item.title,
        date: item.createTime
      }))

      if (reset) {
        guideList.value = newList
      } else {
        guideList.value = [...guideList.value, ...newList]
      }

      total.value = totalCount
      loadMoreStatus.value = guideList.value.length >= total.value ? 'noMore' : 'more'
      pageNum.value++
    } else if (res.code === 200 && res.rows.length === 0) {
      // 没有数据的情况
      if (reset) {
        guideList.value = []
      }
      loadMoreStatus.value = 'noMore'
    }
  } catch (error) {
    console.error('获取办事指南列表失败', error)
    loadMoreStatus.value = 'more'
  }
}

onMounted(() => {
  fetchAreaList()
  fetchGuideList()
})
</script>

<style lang="scss" scoped>
@import '@/styles/common.scss';

.mt-10 {
  margin-top: 20rpx;
}

/* 地区选择栏样式 */
.area-section {
  background-color: #fff;
  border-radius: 12rpx;
  margin-top: 20rpx;
  padding: 20rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.area-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16rpx;
  padding-bottom: 12rpx;
  border-bottom: 1rpx solid #f0f0f0;
}

.area-title {
  font-size: 28rpx;
  font-weight: 500;
  color: #333;
  position: relative;
  padding-left: 12rpx;
}

.area-title::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 4rpx;
  height: 24rpx;
  background-color: #39c5bb;
  border-radius: 2rpx;
}

.area-toggle {
  display: flex;
  align-items: center;
  font-size: 24rpx;
  color: #666;
  padding: 6rpx 12rpx;
}

.area-icon {
  margin-left: 6rpx;
  font-size: 20rpx;
  transition: transform 0.3s;
}

.area-content {
  display: flex;
  flex-direction: row;
  max-height: 180rpx;
  overflow: scroll;
  transition: max-height 0.3s ease;
}
.area-right{
	flex:1;
	margin-top: 8rpx;
}
.area{
	flex:1
}

.area-expanded {
  max-height: 1000rpx; /* 展开后的高度 */
}

/* 地区行样式 */
.area-row {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  margin-bottom: 12rpx;
}

/* 地区项通用样式 */
.area-item {
  padding: 8rpx 16rpx;
  border-radius: 6rpx;
  font-size: 26rpx;
  color: #666;
  transition: all 0.2s ease;

}

/* 全部地区样式 */
.all-area {
  margin-bottom: 0;
  padding-top: 20rpx;
}

/* 父地区样式 */
.parent-area {
  font-weight: 700;
  border-radius: 6rpx;
  color: #333;
  font-size: 28rpx;
  text-align: left;
  justify-content: flex-start;
}

/* 子地区容器样式 */
.child-areas {
  display: flex;
  flex-wrap: wrap;
  margin-top: 4rpx;
}

/* 子地区样式 */
.child-area {
  margin-right: 12rpx;
}

/* 激活状态样式 */
.area-active {
  background-color: #39c5bb;
  color: #fff;
}

/* 父子地区分组样式 */
.area-group {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 16rpx;
  width: 100%;
}

/* 全部地区按钮样式 */
.all-area {
  height: 100%;
  font-weight: 500;
  margin-right: 16rpx;
  margin-bottom: 12rpx;
}

.child-areas {
  display: flex;
  flex-wrap: wrap;
  flex: 1;
}

.child-area {
  font-size: 24rpx;
  margin-right: 12rpx;
  margin-bottom: 12rpx;
  border-radius: 6rpx;
  padding: 8rpx 16rpx;
}

.area-active {
  background-color: #39c5bb;
  color: #fff;
  font-weight: 500;
  box-shadow: 0 2rpx 8rpx rgba(57, 197, 187, 0.3);
  transform: translateY(-2rpx);
}

/* 确保未选中的按钮没有背景色 */
.area-item:not(.area-active) {
  background-color: transparent;
}
.guide-list {
  background-color: #fff;
  border-radius: 16rpx;
  padding: 0 20rpx;
  margin-top: 20rpx;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
}

.guide-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 32rpx 20rpx;
  border-bottom: 2rpx solid #f5f5f5;
  transition: all 0.3s ease;

  &:last-child {
    border-bottom: none;
  }

  &:active {
    background-color: #f0f2f5;
    transform: translateX(10rpx);
  }
}

.guide-content {
  flex: 1;
  margin-right: 20rpx;
}

.guide-title {
  font-size: 30rpx;
  color: #2c3e50;
  margin-bottom: 12rpx;
  line-height: 1.4;
  font-weight: 500;
}

.guide-date {
  font-size: 24rpx;
  color: #8896a8;
}
</style>